<template>
  <div class="login-page">
    <div class="login-container">
      <!-- 品牌展示区 -->
      <div class="brand-area">
        <div class="brand-bg">
          <div class="brand-logo">
            <img src="/logo.png" alt="Logo" />
          </div>
          <div class="brand-slogan">简单高效的任务管理平台</div>
          <div class="brand-decoration">
            <svg width="100%" height="80" viewBox="0 0 400 80">
              <path d="M0,40 Q100,80 200,40 T400,40" fill="none" stroke="#fff" stroke-width="4" opacity="0.2" />
            </svg>
          </div>
        </div>
      </div>
      <!-- 登录表单区 -->
      <div class="form-area">
        <el-card class="form-card" shadow="always">
          <div class="form-title">欢迎登录</div>
          <el-form :model="form" :rules="rules" ref="formRef" @submit.prevent="onSubmit" status-icon>
            <el-form-item prop="account">
              <el-input
                v-model="form.account"
                prefix-icon="el-icon-user"
                placeholder="请输入账户名"
                autocomplete="username"
                @input="validateAccount"
                :aria-invalid="!!accountError"
                :aria-describedby="accountError ? 'account-err' : null"
              />
              <div v-if="accountError" class="err-msg" id="account-err" aria-live="polite">{{ accountError }}</div>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="form.password"
                :type="showPwd ? 'text' : 'password'"
                prefix-icon="el-icon-lock"
                placeholder="请输入密码"
                autocomplete="current-password"
                class="input-glow"
              >
                <template #suffix>
                  <el-icon
                    style="cursor:pointer; font-size: 22px; color: #165dff; transition: color 0.2s;"
                    @click="togglePwd"
                    @mouseenter="eyeHover = true"
                    @mouseleave="eyeHover = false"
                    :class="{ 'eye-hover': eyeHover }"
                  >
                    <component :is="showPwd ? 'el-icon-view' : 'el-icon-view-off'" />
                  </el-icon>
                </template>
              </el-input>
              <div v-if="pwdError" class="err-msg" id="pwd-err" aria-live="polite">{{ pwdError }}</div>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="form.remember">记住我30天</el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                :loading="loading"
                :disabled="!canSubmit"
                style="width: 100%; font-size: 16px;"
                @click="onSubmit"
              >登录</el-button>
            </el-form-item>
            <div class="form-actions">
              <el-link type="primary" @click="goReset">忘记密码？</el-link>
              <el-link type="primary" @click="goRegister">注册账号</el-link>
            </div>
            <div class="third-login">
              <el-tooltip content="微信登录"><el-button type="default" circle icon="el-icon-chat-dot-round" /></el-tooltip>
              <el-tooltip content="QQ登录"><el-button type="default" circle icon="el-icon-qq" /></el-tooltip>
            </div>
          </el-form>
        </el-card>
        <div class="login-footer">
          <span>© 2023 任务管理系统 版权所有</span>
          <el-link type="info" href="#" target="_blank">隐私政策</el-link>
          <el-link type="info" href="#" target="_blank">服务条款</el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const formRef = ref()
const form = reactive({
  account: '',
  password: '',
  remember: true
})
const loading = ref(false)
const accountError = ref('')
const pwdError = ref('')
const showPwd = ref(false)
const eyeHover = ref(false)

const rules = {
  account: [
    { required: true, message: '请输入账户名', trigger: 'blur' },
    { validator: validateAccount, trigger: 'change' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: validatePassword, trigger: 'change' }
  ]
}

function validateAccount(val) {
  accountError.value = ''
  if (!val) {
    accountError.value = '请输入账户名'
    return false
  }
  // 移除邮箱/用户名格式校验
  return true
}
function validatePassword(val) {
  pwdError.value = ''
  if (!val) {
    pwdError.value = '请输入密码'
    return false
  }
  return true
}
function togglePwd() {
  showPwd.value = !showPwd.value
}
const canSubmit = computed(() => {
  return (
    form.account &&
    form.password &&
    !loading.value
  )
})
async function onSubmit() {
  if (!validateAccount(form.account) || !validatePassword(form.password)) return
  loading.value = true
  setTimeout(() => {
    loading.value = false
    if (form.account === 'admin' && form.password === 'admin') {
      localStorage.setItem('isLogin', 'true')
      router.push('/')
    } else {
      pwdError.value = '账户名或密码错误'
    }
  }, 1200)
}
function goReset() {
  // 跳转到重置密码页面
  router.push('/reset-password')
}
function goRegister() {
  // 跳转到注册页面
  router.push('/register')
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(120deg, #165dff 0%, #409eff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-container {
  display: flex;
  width: 900px;
  min-height: 560px;
  background: transparent;
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(16, 30, 54, 0.18);
  overflow: hidden;
}
.brand-area {
  flex: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(120deg, #165dff 0%, #409eff 100%);
  position: relative;
}
.brand-bg {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.brand-logo img {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
}
.brand-slogan {
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 32px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.brand-decoration {
  position: absolute;
  bottom: 24px;
  left: 0;
  width: 100%;
}
.form-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  min-width: 340px;
  position: relative;
}
.form-card {
  width: 340px;
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 rgba(22,93,255,0.08);
  padding: 32px 28px 18px 28px;
  margin-bottom: 18px;
  animation: fadeInUp 0.7s cubic-bezier(.39,.575,.565,1) both;
}
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: none; }
}
.form-title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 24px;
  color: #165dff;
}
.form-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.third-login {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 12px 0 0 0;
}
.login-footer {
  text-align: center;
  color: #888;
  font-size: 13px;
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 16px;
}
.err-msg {
  color: #f56c6c;
  font-size: 13px;
  margin-top: 2px;
  min-height: 18px;
}
.el-input {
  font-size: 16px;
}
.el-button {
  font-size: 16px;
  transition: box-shadow 0.2s, background 0.2s;
}
.el-button:hover {
  box-shadow: 0 2px 8px 0 rgba(22,93,255,0.12);
}
.el-button[disabled] {
  background: #bcd5fa;
  color: #fff;
  border: none;
}
.eye-hover {
  color: #409eff !important;
  filter: drop-shadow(0 0 4px #409eff88);
}
@media (max-width: 900px) {
  .login-container {
    width: 100vw;
    min-width: 0;
    flex-direction: column;
    box-shadow: none;
  }
  .brand-area {
    flex: none;
    height: 180px;
    min-height: 120px;
  }
  .form-area {
    min-width: 0;
    width: 100vw;
    padding: 0 12px;
  }
  .form-card {
    width: 100%;
    min-width: 0;
    margin: 0 auto 18px auto;
  }
}
@media (max-width: 600px) {
  .brand-slogan {
    font-size: 18px;
  }
  .form-title {
    font-size: 22px;
  }
}
</style> 